<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    defatult: () => [],
  },
})

const emit = defineEmits(['changeDone', 'handleDel', 'checkAllFn'])
const changeDone = (id) => {
  emit('changeDone', id)
}

// 下面的选中上面的自动选中
// const isCheckAll = computed(() => {
//   return props.list.every((item) => item.done)
// })

const isCheckAll = computed({
  get() {
    return props.list.every((item) => item.done)
  },
  set(val) {
    emit('checkAllFn', val)
  },
})

// 上面的选中下面的全部选中
</script>

<template>
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="isCheckAll"
    />
    <!--      :checked="isCheckAll" @click="emit('checkAllFn', !isCheckAll)" -->
    <label for="toggle-all">全部完成</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li :class="{ completed: item.done }" v-for="item in list" :key="item.id">
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @change="changeDone(item.id)"
          />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="emit('handleDel', item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
      <!-- <li>
        <div class="view">
          <input class="toggle" type="checkbox" />
          <label>Buy a unicorn</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web" />
      </li> -->
    </ul>
  </section>
</template>
